import {Button, Checkbox, Input,Divider} from "antd";
import {useStore} from "../store";
import React, { useState} from "react";
import {observer} from "mobx-react-lite";

function Task() {
    let {taskStore} = useStore();


    const onChange=(id,e)=>{
        console.log(e.target.checked)
        console.log(id)
        taskStore.checkIsDone(id,e.target.checked)
    }


    const allChange=(e)=>{
        taskStore.selectAll(e.target.checked)
    }

    function addTask(e){
        let item={id:4,name:searchValue,isDone:false}
        if (e.keyCode === 13) {
            taskStore.addTask(item)
        }
    }

    function delList(id) {
        taskStore.deleteTask(id);
    }
    const [searchValue,setSearchValue]=useState('123')
    return (<div>
        <>
           <ul> <li><Input value={searchValue} onKeyUp={(e)=>addTask(e)} onChange={(e)=>setSearchValue(e.target.value)}/></li>
            <Divider/>
            <Divider/>
               <li><Checkbox checked={taskStore.isAll} onChange={(e)=>allChange(e)}>全选</Checkbox>
           </li>

               {taskStore.list.map(item=>(
                <li key={item.id}  ><Checkbox checked={item.isDone} onChange={(e)=>onChange(item.id,e)}>{item.name}</Checkbox>
                    <Button  size={'small'} onClick={()=>delList(item.id)}>删除</Button>

                </li>
               ))}

           </ul>
        </>

    </div>)
}

export default observer(Task)